<template>
  <div class='note-wrapper'>
    <header>
      <el-form :model='form' :inline='true' class='table-form' size='mini'>
        <el-row>
          <el-col :span='6'>
            <el-form-item label='标题:'>
              <el-input v-model='form.title' placeholder='请输入标题'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label='笔记分类:'>
              <el-select v-model='form.type' placeholder='请选择笔记分类'>
                <el-option v-for='option in types' :key='option.value' :label='option.name' :value='option.value'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label='笔记是否可见:'>
              <el-select v-model='form.state' placeholder='请选择笔记是否可见'>
                <el-option label='可见' value='1'></el-option>
                <el-option label='不可见' value='0'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class='form-btn-area tr'>
          <el-button type='primary' @click='query'>查询</el-button>
          <el-button type='success' @click='add'>新增</el-button>
        </div>
      </el-form>
    </header>
    <el-table :data='list' stripe @sort-change='sortChange'>
      <el-table-column label='序号' width='60'>
        <template #default='scope'>
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label='标题' prop='title' show-overflow-tooltip></el-table-column>
      <el-table-column label='笔记分类'>
        <template #default='scope'>
          <el-tag type='success'>{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label='文件名' prop='file.name' show-overflow-tooltip></el-table-column>
      <el-table-column label='创建人' prop='create_user' show-overflow-tooltip></el-table-column>
      <el-table-column label='修改人' prop='update_user' show-overflow-tooltip></el-table-column>
      <el-table-column sortable='true' label='创建日期' prop='create_date' show-overflow-tooltip></el-table-column>
      <el-table-column sortable='true' label='修改日期' prop='update_date' show-overflow-tooltip></el-table-column>
      <el-table-column label='可见性'>
        <template #default='scope'>
          {{
          scope.row.state == 1 ? '可见' : '不可见'
          }}
        </template>
      </el-table-column>
      <el-table-column width='130'>
        <template #default='scope'>
          <el-link class='f12' type='primary' @click='edit(scope.$index, scope.row)'>修改</el-link>
          <el-link class='ml10 f12' type='danger' @click='remove(scope.$index, scope.row)'>删除</el-link>
          <el-link class='ml10 f12' type='success' @click='download(scope.$index, scope.row)'>下载</el-link>
        </template>
      </el-table-column>
    </el-table>
    <footer class='fr'>
      <Page :total='total' v-on:query='query'></Page>
    </footer>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import request from 'request/index';
import ptypes from '@/utils/type';
import Page from '@/components/page.vue'
import store from "store/index";

export default {
  name: 'note-mng',
  setup () {
    const router = useRouter();
    const list = ref([]);
    const types = ref(ptypes);
    const total = ref(0);
    const form = reactive({
      type: '',
      state: '',
      title: ''
    });
    const user = store.state.user.name;

    const query = params => {
      params = Object.assign({}, form, { page: 1, pageSize: 10 }, params);
      request.get('/blog/list', params).then(data => {
        list.value = data.data;
        total.value = data.size || data.data.length || 0;
      });
    };
    const sortChange = ({ column, prop, order }) => {
      query({ sortField: prop, order: order == "descending" ? -1 : 1 });
    };
    const add = () => {
      router.push({ name: 'noteAdd', params: null });
    };
    const edit = (index, item) => {
      item.filename = item.file.name;
      router.push({ name: 'noteAdd', params: item });
    };
    const remove = (index, item) => {
      request.deleteOne('/blog/deleteOne', { _id: item._id, user: user }).then(data => {
        ElNotification({
          message: '笔记删除成功!',
          type: 'success'
        });
        query();
      });
    };
    const download = (index, item) => {
      const id = item._id;
      let $link = document.createElement('a'),
        $body = document.querySelector('body');
      $body.appendChild($link);

      $link.setAttribute('href', `/bgmg/blog/detail/download/${id}`);
      $link.setAttribute('display', 'none');
      $link.addEventListener('click', (e) => {
        let key = setTimeout(() => {
          $link.remove();
          clearTimeout(key);
        }, 300);
      })
      $link.click();

      ElNotification({
        message: '文件下载成功!',
        type: 'success'
      });
    }

    query({});

    return {
      total,
      types,
      form,
      list,
      add,
      edit,
      query,
      sortChange,
      remove,
      download
    };
  },
  components: {
    Page
  }

};
</script>

<style lang="scss" scoped>
a.el-link.f12 {
  font-size: 12px;
}
</style>
